<template>
  <div class="home">
    <input type="text" v-model="title" /> <button @click="add">添加</button>
    <ul class="nav">
      <li
        v-for="(item, index) in nav"
        :key="item.id"
        @click="flag = index"
        :class="{ active: flag == index }"
      >
        {{ item.title }}
      </li>
    </ul>
    <ul class="con">
      <h2>
        正在看的{{ nav[flag].title }}
        <button @click="sorttime">时间排序</button>
      </h2>
      <li v-for="(item, index) in list" :key="index" v-show="item.cid == flag">
        <input
          type="text"
          v-model="item.con"
          @keydown.enter="update(item.con)"
          v-if="num == index"
        />
        <span @dblclick="num = index" v-else>{{ item.con }}</span>
        <span>{{ item.time.toLocaleString() }}</span>
        <button class="remove" @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      title: "",
      num: -1,
      //双击修改的是哪个数据的下标
      nav: [
        { title: "书籍", id: 0 },
        { title: "电影", id: 1 },
        { title: "游戏", id: 2 },
        { title: "综艺", id: 3 },
        { title: "体育", id: 4 },
      ],
      list: [
        {
          con: "小王子",
          time: new Date(),
          cid: 0,
        },
        {
          con: "目送",
          time: new Date(),
          cid: 0,
        },
        {
          con: "被嫌弃的松子的一生",
          time: new Date(),
          cid: 1,
        },
        {
          con: "黑寡妇",
          time: new Date(),
          cid: 1,
        },
        {
          con: "王者荣耀",
          time: new Date(),
          cid: 2,
        },
        {
          con: "lol",
          time: new Date(),
          cid: 2,
        },
        {
          con: "绝地求生-刺激战场",
          time: new Date(),
          cid: 2,
        },
        {
          con: "非诚勿扰",
          time: new Date(),
          cid: 3,
        },
        {
          con: "中餐厅",
          time: new Date(),
          cid: 3,
        },
        {
          con: "奥运会",
          time: new Date(),
          cid: 4,
        },
        {
          con: "马龙樊振东许昕yyds",
          time: new Date(),
          cid: 4,
        },
      ],
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  //进入页面从本地存储中拿数据
  methods: {
    add() {
      if (this.title == "") {
        alert("内容不能为空");
        return false;
      }
      //判空

      let res = this.list.filter((item) => {
        return item.con == this.title;
      });
      if (res.length != 0) {
        alert("内容不能重复");
        return false;
      }
      //判重 如果过滤出内容一样的数组长度不为0

      this.list.push({ con: this.title, time: new Date(), cid: this.flag });
      this.title = "";
      //往list中添加数据 根据添加的cid区分分类
    },
    //添加
    remove(index) {
      this.list.splice(index, 1);
    },
    //删除
    update(val) {
      if (val != "") {
        this.num = -1;
      } else {
        alert("修改内容不能为空");
      }
    },
    //修改完成的时候按下回车键 让input框隐藏 并且要判断修改的内容是不是为空

    sorttime() {
      this.list = this.list.sort((a, b) => {
        return new Date(b.time) - new Date(a.time);
      });
    },
  },
  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(newval));
      },
      deep: true,
    },
  },
  //监听list 如果 变化就存在本地存储中 deep是因为这个list是一个对象所以要深度监听
};
</script>
<style lang="scss">
.home {
  width: 500px;
  margin: 100px auto;
}
.nav {
  width: 500px;
  display: flex;
  li {
    flex: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .active {
    background: cadetblue;
    color: #fff;
  }
}
.con {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  li {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-right: 100px;
    box-sizing: border-box;
    .remove {
      display: none;
      // margin-left: ;
      position: absolute;
      right: 5px;
    }
  }
}
.con li:hover {
  background: chocolate;
  .remove {
    display: block;
  }
}
</style>
